<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>后台管理首页</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

<link rel="stylesheet" href="webjars/layui/2.4.5/css/layui.css">
<script type="text/javascript" src="webjars/layui/2.4.5/layui.js"></script>
<script src="webjars/jquery/1.11.1/jquery.js"></script>

<link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap.css">
<link rel="stylesheet" href="webjars/bootstrap/3.3.7-1/css/bootstrap-theme.css">
<link rel="stylesheet" href="webjars/bootstrap-table/1.9.1-1/bootstrap-table.css">
<link rel="stylesheet" href="webjars/bootstrap-select/2.0.0-beta1/dist/css/bootstrap-select.css">
<link rel="stylesheet" href="webjars/bootstrapvalidator/0.5.2/css/bootstrapValidator.css">

<script type="text/javascript" src="webjars/bootstrap/3.3.7-1/js/bootstrap.js"></script>
<script type="text/javascript" src="webjars/bootstrap-select/2.0.0-beta1/dist/js/bootstrap-select.js"></script>
<script type="text/javascript" src="webjars/bootstrap-select/2.0.0-beta1/dist/js/i18n/defaults-zh_CN.js"></script>
<script type="text/javascript" src="webjars/bootstrapvalidator/0.5.2/js/bootstrapValidator.js"></script>
<!-- bootstrap表格js -->
<script type="text/javascript" src="webjars/knockout/3.4.2/knockout.js"></script>
<script type="text/javascript" src="webjars/knockout-mapping/2.4.1/knockout.mapping.js"></script>
<script type="text/javascript" src="webjars/bootstrap-table/1.9.1-1/bootstrap-table.js"></script>
<script type="text/javascript" src="webjars/bootstrap-table/1.9.1-1/locale/bootstrap-table-zh-CN.js"></script>
<script type="text/javascript" src="webjars/bootbox/4.4.0/bootbox.js"></script>
<script type="text/javascript" src="static/bootstrap-3.3.7-dist/js/bootstrap.table.xzy.js"></script>
<!-- 密码可见 -->
<script src="static/bootstrap-3.3.7-dist/js/bootstrap-show-password.js"></script>
<style type="text/css">
	dl{
		margin-bottom: 0px;
	}
	.material-icons{
		font-size: 20px;
	}
	.input-group-addon{
		padding: 0px 12px;
		padding-top: 6px;
	}
	.layadmin-backlog .layadmin-backlog-body {
    display: block;
    padding: 10px 15px;
    background-color: #f8f8f8;
    color: #999;
    border-radius: 2px;
    -webkit-transition: all .3s;
	}
	.layadmin-backlog-body h3 {
    padding-bottom: 10px;
    font-size: 25px;
	}
	.layadmin-backlog-body p cite {
    font-style: normal;
    font-size: 30px;
    font-weight: 300;
    color: #009688;
	}
	a:hover{
	cursor: pointer;
	text-decoration:none;
	}
</style>
</head>
<body class="layui-layout-body">
	<div class="layui-layout layui-layout-admin">
		<div class="layui-header">
			<div class="layui-logo">图书管理系统</div>
<!-- 			<!-- 头部区域（可配合layui已有的水平导航） -->
			<ul class="layui-nav layui-layout-left">
				
			</ul> -->
			<ul class="layui-nav layui-layout-right">
				<li class="layui-nav-item"><a href="javascript:;"> <img
						src="static/img/main.jpg" class="layui-nav-img"> <span sec:authentication="principal.name"></span>
				</a>
					<dl class="layui-nav-child">
						<dd>
							<a href="#" data-toggle="modal" data-target="#myModal">修改密码</a>
						</dd>
					</dl></li>
				<li class="layui-nav-item"><a href="logout2">退出</a></li>
			</ul>
		</div>

		<div class="layui-side layui-bg-black">
			<div class="layui-side-scroll">
				<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
				<ul class="layui-nav layui-nav-tree" lay-filter="test" lay-shrink="all" sec:authorize="hasRole('ROLE_ADMIN')">
					<li class="layui-nav-item"><a href="#" onclick="pageView('bookType/manage')">图书类型</a></li>
					<li class="layui-nav-item"><a href="#" onclick="pageView('librarian/manage')">图书管理员管理</a></li>
					<li class="layui-nav-item"><a href="#" onclick="pageView('reader/manage')">读者管理</a></li>
					<li class="layui-nav-item"><a href="#" onclick="pageView('book/manage')">图书管理</a></li>
					<li class="layui-nav-item"><a href="#" onclick="pageView('record/manage')">操作日志</a></li>
					<li class="layui-nav-item"><a href="#" onclick="pageView('borrowRecord/manage')">借书还书记录</a></li>
				</ul>
				<ul class="layui-nav layui-nav-tree" lay-filter="test" lay-shrink="all" sec:authorize="hasRole('ROLE_BOOKADMIN')">
					<li class="layui-nav-item"><a href="#" onclick="pageView('reader/manage')">读者管理</a></li>
					<li class="layui-nav-item"><a href="#" onclick="pageView('book/manage')">图书管理</a></li>
					<li class="layui-nav-item"><a href="#" onclick="pageView('borrowRecord/manage')">借书还书记录</a></li>
				</ul>
			</div>
		</div>
		<div class="layui-body">
			<!-- 内容主体区域 -->
			<div style="padding: 15px;" id = "home">
				<div class="layui-col-md12">
					<div class="layui-card">
						<div class="layui-card-header">待办事项</div>
						<div class="layui-card-body">
							<div class="layui-carousel layadmin-carousel layadmin-backlog"
							style="width: 100%; height: 280px;" lay-indicator="inside"
							lay-arrow="none">
								<div carousel-item="">
									<ul class="layui-row layui-col-md12 layui-this">
										<li class="layui-col-md6">
											<a class="layadmin-backlog-body">
												<h3>待操作借书记录</h3>
												<p>
													 <cite th:if="${borrow==0}">0</cite>
													<cite th:if="${borrow!=0}" th:text="${borrow}"></cite> 
												</p>
											</a>
										</li>
										<li class="layui-col-md6">
											<a class="layadmin-backlog-body">
												<h3>待还书人数</h3>
												<p>
													<cite th:if="${borrow1==0}">0</cite>
													<cite th:if="${borrow1!=0}" th:text="${borrow1}"></cite> 
												</p>
											</a>
										</li>
									</ul>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
		<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h3 class="modal-title" id="myModalLabel" >修改密码</h3>
	    </div> 
		<form id="defaultForm" class="form-horizontal bv-form cmxform">
		    <div class="modal-body">
					<div class="form-group">
						<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label">旧密码:</label>
						<div class="col-sm-8">
						<input  id="password" 
								onchange="pwdupdata(this.value)"
								data-toggle="password"
								data-placement="after"
								class="form-control"
								type="password"
								placeholder="原密码"
								data-eye-class="material-icons"
								data-eye-open-class="visibility"
								data-eye-close-class="visibility_off"
								data-eye-class-position-inside="true"
								data-message="点击隐藏或显示密码"
								required></div>
						<div><label id="account-error" class="error col-lg-offset-4" for="account"></label></div>
					</div>
					<div class="form-group">
						<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label">新密码:</label>
						<div class="col-sm-8">
						<input  id="password1" 
								onchange="fun_1(this.value)"
								data-toggle="password"
								data-placement="after"
								class="form-control"
								type="password"
								placeholder="新密码"
								data-eye-class="material-icons"
								data-eye-open-class="visibility"
								data-eye-close-class="visibility_off"
								data-eye-class-position-inside="true"
								data-message="点击隐藏或显示密码"
								required></div>
						<div><label id="account-error1" class="error col-lg-offset-4" for="account"></label></div>
					</div>
					<div class="form-group">
						<label for="recipient-name" class="col-sm-2 col-lg-offset-1 control-label">确认密码:</label>
						<div class="col-sm-8">
						<input  id="password2" 
								onchange="fun_2(this.value)"
								data-toggle="password"
								data-placement="after"
								class="form-control"
								type="password"
								placeholder="确认密码"
								data-eye-class="material-icons"
								data-eye-open-class="visibility"
								data-eye-close-class="visibility_off"
								data-eye-class-position-inside="true"
								data-message="点击隐藏或显示密码"
								required></div>
						<div><label id="account-error2" class="error col-lg-offset-4" for="account"></label></div>
					</div>
				</div>
				  
	     	<div class="modal-footer">
	       		<button type="button" class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span> 关闭</button>
	        	<button type="button" class="btn btn-primary" onclick="changePwd1()"><span class="glyphicon glyphicon-log-in"></span> 提交</button>
	     	</div>
		</form>
		</div>
	    </div>
	    
	  </div>
	<script src="../src/layui.js"></script>
	<script>
		//JavaScript代码区域
		layui.use('element', function() {
			var element = layui.element;

		});
		
		function pageView(url){
			$("#home").load(url);
		}
		
		bootbox.setDefaults({
			locale:'zh_CN',		//设置字符集
			size: 'small',		//设置大小
			title:'提示'			//标题提示
		});
		
	</script>
<script type="text/javascript">
function pwdupdata(str){
	$.post('password', {password: str}, function(data){
		if(!data){
			$("#account-error").html("原密码输入错误！");
		}else{
			$("#account-error").html("");
		}
	});
}

function fun_1(str){
	if(str == "" || str == null){
		$("#account-error1").html("请输入新密码！");
	}else{
		$("#account-error1").html("");
	}
}

function fun_2(str){
	if(str == "" || str == null){
		$("#account-error2").html("请再次输入新密码！");
	}else{
		$("#account-error2").html("");
	}
}

function changePwd1(){
	var possword = $("#password").val();
	var possword1 = $("#password1").val();
	var possword2 = $("#password2").val();
	if(possword == "" || possword == null){
		$("#account-error").html("请输入原密码！");
	}else {
		$.post('password', {password: possword}, function(data){
			if(!data){
				$("#account-error").html("原密码输入错误！");
			}else{
				if(possword1 == "" || possword1 == null){
					$("#account-error1").html("请输入新密码！");
				}else if(possword2 == "" || possword2 == null){
					$("#account-error2").html("请再次输入新密码！");
				}else if(possword1 != possword2){
					$("#account-error2").html("两次密码输入不一致！");
				}else{
					$.post('changePwd1', {password: possword1}, function(data){
						if(!data){
							bootbox.alert("修改失败！");
						}else{
							bootbox.alert({
							    buttons: {
								   ok: {
									    label: '确定',
									    className: 'btn btn-primary'
								    }
							    },
							    message: '修改成功！',
							    callback: function() {
							    	window.location.href="logout";
							    },
							    title: "提示",
						    });
						}
					});
				}
			}
		});
	}
}
</script>
</body>
</html>